<template>
    <ul>
        <li v-for="item,index in booksList" :key="item.id">
            <input type="checkbox" @click="xuanzhe(index,item.id)" v-model="item.isChenced">
            {{ item.bookname }}
            <input type="button" value="删除" @click="delBook(item.id)">
        </li>
    </ul>
    <div>
        <input type="checkbox" :checked="isCheck" @click="quanxuan"><span @click="quanxuan">全选</span><span class="del" @click="dele">删除</span>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
// 导入types/app.ts中的bookItem类型
import { bookItem,Numbric } from '../types/app';
const booksList = ref<bookItem[]>([])
const idList = ref<Numbric[]>([])
const isCheck = ref(false)
import http from '../utils/http';
onMounted(async()=>{
  // get方法后面需要传入 泛型类型 参数, 当前的get方法是封装之后的方法，如果有参数，直接写在第二个参数的位置，就不需要params
  const res = await http.get<bookItem[]>('/books/queryall',{})
  booksList.value = res
})
const delBook = (id:Numbric):void=>{
  booksList.value = booksList.value.filter((item:bookItem) => item.id!==id)
  // 现在目前有booksList 图书数组，还有一个数组是存单个或多个需要删除图书的id组成的数组
}
const quanxuan = ()=>{
    isCheck.value = !isCheck.value
    booksList.value.forEach((item:bookItem)=>{
      item.isChenced = isCheck.value
    })
}
const xuanzhe = (index:number,id:Numbric) => {
    booksList.value[index].isChenced = !booksList.value[index].isChenced
    isCheck.value = booksList.value.every(item => item.isChenced)
    if (!idList.value.includes(id)) {
        idList.value.push(id);
    }
}
const dele = () =>{
    booksList.value = booksList.value.filter(item => !item.isChenced);
}
</script>
<style>
    .del{
        margin-left: 10px;
    }
</style>